import {Layout, Button, Form, Input, Modal, message} from "antd";
import React, { useEffect, useState } from 'react';
import axios from "axios";

const {  Content } = Layout;
const OnlineBuy = (stock) => {

    const phone = sessionStorage.getItem('phone');
    const name = sessionStorage.getItem('username');
    const address = sessionStorage.getItem('address');
    const [sum,setSum] = useState(0);

    const buyChange = (value) => {
        setSum(value.target.value);
    };

    useEffect(()=>{
    })
    function mySubmit() {
     setVisible(true)
    }

    // 自定义验证规则
    const validateSum = (rule, value, callback) => {
        if ((!sum > 0) || isNaN(sum)) {
            callback('请输入正确的数值'); // 验证失败
        }else {
            callback();
        }
    };

    const [visible, setVisible] = useState(false);

    const handleConfirm = async () => {
        try {
            const response = await axios.post('http://localhost:8084/order',
            {
                orderObtain : phone,
                orderAccount : sum,
                stockId : stock.stock.stockId,
                orderSum : (sum * stock.stock.stockPrice).toFixed(2),
                orderWay : '线上',
                orderConfirm : '未确认',
            },
            {
                headers: {
                    'Content-Type': 'application/json'
                }
            });
            console.log(response.data)
            if (response.data.code === 0){
                message.error(response.data.msg)
            }else {
                setVisible(false); // 关闭弹窗
                message.success('支付成功！请在订单里面查看')
                window.location.reload();
            }
        } catch (error) {
            console.error(error);
        }
    };

    const handleCancel = () => {
        // 在这里处理取消按钮的逻辑
        setVisible(false); // 关闭弹窗
    };


    return(
        <>
                    <Form onFinish={mySubmit} >
                        <Form.Item label="收货人姓名" name="name" rules={[{ required: true, message: '请输入姓名' }]} initialValue={name}>
                            <Input />
                        </Form.Item>

                        <Form.Item label="电话号码" name="phone" rules={[{ required: true, message: '请输入电话号码' }]} initialValue={phone}>
                            <Input />
                        </Form.Item>

                        <Form.Item label="收货地址" name="address" rules={[{ required: true, message: '请输入收货地址' }]} initialValue={address}>
                            <Input />
                        </Form.Item>

                        <Form.Item label="购买数量(斤)" name="sum"  rules={[
                            { validator: validateSum }, // 添加自定义规则
                        ]}>
                            <Input onChange={buyChange} value={sum}/>
                            {!isNaN(sum)  ? (
                            <p>总价: {(sum * stock.stock.stockPrice).toFixed(2)}元</p>
                                ):(
                                    <></>
                                )}
                        </Form.Item>

                        <Form.Item>
                            <Button type="primary" htmlType="submit">下一步</Button>
                        </Form.Item>
                    </Form>
            <div>
                <Modal
                    title="请付款"
                    visible={visible}
                    onOk={handleConfirm}
                    onCancel={handleCancel}
                    okText="确认"
                    cancelText="取消"
                >
                    <p>确定要进行付款吗？</p>
                    <strong style={{color:'red'}}>总价: {(sum * stock.stock.stockPrice).toFixed(2)}元</strong>
                </Modal>
            </div>

        </>
    )
}
export default OnlineBuy;